<template>
  <div class="materwarpper flex">
    <div class="mater_left">
      <div class="materheader flexbetween">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          class="queryform p-12"
        >
          <el-form-item>
            <el-button
              v-hasPermi="['system:material:add']"
              class="f-14 f14btn"
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="handleAdd"
            >
              新建素材
            </el-button>
          </el-form-item>
          <el-form-item label="" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入关键字"
              clearable
              style="width: 170px"
              @keyup.enter.native="handleQuery"
              suffix-icon="el-icon-search"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.status"
              @change="handleQuery"
              style="width: 160px"
              placeholder="类型"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.status"
              @change="handleQuery"
              style="width: 160px"
              placeholder="请选择标签"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex pr-12" v-if="ismgt">
          <el-button size="small" icon="el-icon-check" @click="handleSelectAll">全选</el-button>
          <el-button size="small" type="primary" plain @click="handleMerge">
            <svg-icon class-name="search-icon mr-5" icon-class="ihebing" />
            合并
          </el-button>
          <el-button size="small" icon="el-icon-delete"  @click="handleMulti(true)">删除</el-button>
          <el-button size="small" type="primary" plain @click="handleMulti(false)">取消管理</el-button>
        </div>
        <div class="flex pr-12" v-else>
          <el-button v-hasPermi="['system:material:mutilmgt']" size="small" @click="handleMulti(true)">批量管理</el-button>
          <el-button v-hasPermi="['system:material:labelmgt']" size="small" @click="handleLabel">标签管理</el-button>
        </div>
      </div>
      <div class="materbody">
        <waterfall
          :col="col"
          :width="itemWidth"
          :gutterWidth="gutterWidth"
          :data="materialList"
          @loadmore="loadmore"
          @finish="finish"
        >
          <div
            v-for="(item, index) in materialList"
            :key="index"
            class="materialitem p-12 f-14"
            @click="handleItem(item)"
            :class="{ active: rowitem && rowitem.id == item.id }"
          >
            <div v-if="ismgt" class="mater_master">
              <img v-if="item.ischecked"
                src="@/assets/images/check-succ.png"
                alt=""
                class="selecticon"
              />
              <img v-else
                src="@/assets/images/check-empty.png"
                alt=""
                class="selecticon"
              />
              <!-- <img src="@/assets/images/check-succ.png" alt="" class="selecticon" /> -->
            </div>
            <div class="pr-16 f-14 c_text2 fw-6 mb-8 flex aligncenter">
              <span class="textover m_title">{{ item.meterialName }}</span
              >
              <i
                v-if="item.isFavorite === 0"
                class="el-icon-star-off f-16 c_warning2"
                @click.stop="handleCollect(item, 1)"
              ></i>
              <i
                v-else
                class="el-icon-star-on f-18 c_warning2"
                @click.stop="handleCollect(item, 0)"
              ></i>
            </div>
            <div class="f-12 c_text3">{{ item.updateTime }}</div>
            <div class="m_info mt-8 p-8">
              <div class="my_content w_full">
                <div class="bg_fff p-6">{{ item.contentList.length > 0 ? item.contentList[0].contentJson : '' }}</div>
              </div>
            </div>
            <div class="flexbetween mt-8">
              <div class="m_label c_888999 f-12">标签：
                <span v-for="(tag, index) in item.tagList" :key="tag.id">
                  {{ tag.tagName }}
                  {{ item.tagList.length-1 != index ? '、' : null }}
                </span>
              </div>
              <div class="m_label c_888999 f-12" v-if="item.contentList">共{{item.contentList.length}}条</div>
            </div>
            <!-- 底部功能 -->
            <div class="materbottom flex" v-if="!ismgt">
              <div v-hasPermi="['system:material:masstexting']" class="flex1 flexcenter" @click.stop="handleOpen(1, item)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="群发"
                  placement="top"
                >
                  <svg-icon class-name="search-icon c_fff" icon-class="isend" />
                </el-tooltip>
              </div>
              <div v-hasPermi="['system:material:edit']" class="flex1 flexcenter" @click.stop="handleEdit(item)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <svg-icon class-name="search-icon" icon-class="iedit2" />
                </el-tooltip>
              </div>
              <div v-hasPermi="['system:material:copy']" class="flex1 flexcenter" @click.stop="handleCopy(item)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="复制"
                  placement="top"
                >
                  <svg-icon class-name="search-icon c_fff" icon-class="icopy" />
                </el-tooltip>
              </div>
              <div v-hasPermi="['system:material:merge']" class="flex1 flexcenter" @click.stop="handleOpen(2, item)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合并"
                  placement="top"
                >
                  <svg-icon class-name="search-icon c_fff" icon-class="ihebing" />
                </el-tooltip>
              </div>
              <div v-hasPermi="['system:material:delete']" class="flex1 flexcenter" @click.stop="handleDelete(item)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <svg-icon class-name="search-icon c_fff" icon-class="idelete" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </waterfall>
      </div>
    </div>
    <div class="mater_right">
      <material-right :item='rowitem' @onchangeList="getList"/>
    </div>

    <!-- 群发素材 -->
    <el-dialog
      title="群发素材"
      :visible.sync="open"
      width="580px"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="0">
        <div class="c_text f-14 mb-15">
          选择使用“xxx于2023-12-18 11:27:56上传”的群发类型：
        </div>
        <el-form-item label="" prop="name">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">新建高级群发</el-radio>
            <el-radio :label="2">新建群公告</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="subloading"
          @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 标签管理 -->
    <label-mgt v-if="openlabel" :visable='openlabel' @close="handleCloselabel" />
    <!-- 合并素材 -->
    <material-merge 
      v-if="openmerge" 
      :visable='openmerge' 
      :mergeList="mergeList" 
      :meterialType="listType" 
      @closeDrawer="onHandleCloseDrawer"
    />
  </div>
</template>

<script>
import {
  fetchMeterialItemList,
  updateMeterial,
  deleteMeterialById
} from "@/api/market/material"
import MaterialRight from './MaterialRight.vue'
import LabelMgt from './LabelMgt.vue'
import MaterialMerge from './MaterialMerge.vue'
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      statusOptions: [],
      materialList: [],
      loading: false,
      finished: false, //是否已完成
      gutterWidth: 16,
      itemWidth: 310,
      col: 3,
      form: {
        type: 1,
      },
      rules: {},
      open: false,
      subloading: false,
      ismgt:false,//是否是批量管理
      rowitem:{},
      openlabel:false,//标签弹窗开关
      isall:false,
      openmerge:false,//标签合并
      mergeList: []
    };
  },
  props: {
    listType: {
      type: Number,
      default: 0,
    }
  },
  components:{
    MaterialRight,
    LabelMgt,
    MaterialMerge
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        let data = await fetchMeterialItemList({...this.queryParams})
        if (data.code === 200) {
          this.materialList = data.itemList
          this.rowitem = data.itemList[0]
        }
      } catch (error) {
        this.loading = false
      }
      // this.loading = true;
      // try {
      //   let res = await login_player_search({
      //     action_id: this.info.id,
      //     category: this.voteGroupName,
      //     page: this.currenPage,
      //     sort:this.sort,
      //     limit: 30,
      //     keycode:this.searchVal
      //   })
      //   //先判断有没有选中//加入选择状态
      //   res.data.data.list.forEach(item => {
      //     let result=this.choosePlayersList.find(items=>items.id== item.id)
      //     result?item.chooseStatue=true:item.chooseStatue=false
      //   });
      //   //如果为空结束加载
      //   if(res.data.data.list.length==0){
      //     this.loading=false
      //   }
      //   this.playerList=[...this.playerList,...res.data.data.list]
      //   this.toal=res.data.data.toal
      //   //如果总页数大于当前页数
      //   if(this.toal>this.currenPage){
      //     this.currenPage++
      //   }else if(this.toal<=this.currenPage){
      //     this.finished=true
      //   }
      // } catch (error) {
      // }
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    handleAdd() {
      // console.log('11111111')
      this.$router.push({ path: `material/edit?list_type=${this.listType}` });
    },

    loadmore() {
      if (this.loading || this.finished) {
        return;
      }
      this.getMaterList();
    },

    //渲染完成
    finish() {
      this.loading = false;
    },

    handleItem(item) {
      if(this.ismgt){
        this.materialList = this.materialList.map(rows => {
          if(rows.id === item.id) {
            rows.ischecked = !rows.ischecked
          }
          return rows
        })
      }else{
        // 点击
        this.rowitem = item
      }

    },

    // 全选
    handleSelectAll(){
      this.isall = !this.isall
      this.materialList = this.materialList.map(item=>{
        if(this.isall){
          item.ischecked = true
        }else{
          item.ischecked = false
        }
        return item
      })
    },

    handleOpen(type, row) {
      switch (type) {
        case 1:
          this.open = true;
          break;
        case 2:
          // let materialList = this.materialList.map(item=>{
          //   if(row.id === item.id){
          //     item.ischecked = true
          //   }
          //   return item
          // })
          row.ischecked = true
          this.handleMulti(true)
          break;
      }
    },

    // 删除
    handleDelete(item) {
      this.$confirm("确定删除该角色?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
      })
        .then(() => {
          deleteMeterialById(item.id).then(res => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
        })
        .catch(() => {});
    },

    // 编辑
    handleEdit(item) {
      this.$router.push({ path: `material/edit?id=${item.id}&list_type=${this.listType}` });
    },
    // 复制
    handleCopy(item) {
      this.$router.push({ path: `material/edit?id=${item.id}&list_type=${this.listType}&type=copy` });
    },

    handleClose() {
      this.open = false;
    },

    // 群发素材确认
    handleSubmit(){},

    // 收藏
    async handleCollect(row, type) {
      await updateMeterial({id: row.id, isFavorite: type})
      this.getList()
    },

    handleMulti(type){
      this.ismgt = type
      if(!type){
        this.materialList.forEach(item=>{
          item.ischecked = false
        })
      }
    },

    handleLabel(){
      console.log('定价')
      this.openlabel = true
    },

    handleCloselabel(){
      this.openlabel = false
    },
    onHandleCloseDrawer() {
      this.openmerge = false
      this.getList()
    },
    handleMerge(){
      this.mergeList = this.materialList.filter((item => (item.ischecked)))
      this.openmerge = true
      this.handleMulti(false)
    },
  },
};
</script>

<style lang="scss" scoped>
.materwarpper {
  width: 100%;
  height: 100%;
}
.mater_left {
  flex: 1 1;
  height: 100%;
  background-color: #f5f6f7;
  position: relative;
}
.materheader {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
  background-color: #fff;
}
.mater_right {
  width: 288px;
  background: #f9f9f9;
  border-left: 1px solid #e9e9e9;
}
.queryform {
  display: flex;
  .el-form-item {
    margin-bottom: 0;
  }
}
.materbody {
  padding: 20px 0 20px 20px;
  height: calc(100% - 50px);
  overflow-y: auto;
  word-break: break-all;
}
.materialitem {
  cursor: pointer;
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e9e9e9;

  &.active {
    border: 1px solid rgba(47, 84, 235, 0.85);
  }
  .materbottom {
    display: none;
  }

  &:hover .materbottom {
    display: flex;
  }

  .c_warning2 {
    display: none;
  }

  &:hover .c_warning2 {
    display: inline-block;
  }
}
.el-form-item {
  margin-bottom: 0;
}
.m_info {
  background-color: #f9f9f9;
}
.m_label {
  max-width: 160px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.materbottom {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 32px;
  border-radius: 4px;
  padding: 12px 0;
  margin: 0 12px;
  background-color: #3070ff;
}
.m_title {
  display: inline-block;
  width: 88%;
}
.mater_master {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: hsla(0, 0%, 100%, 0.48);
}
.selecticon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  opacity: 1!important;
}
</style>